<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="application/json;charset=utf-8">
    <!--<script type="application/javascript" src="http://localhost:8080/static/jquery-3.4.1.min.js"></script>-->
    <!--<script type="application/javascript" src="jquery-3.4.1.min.js"></script>-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>hello word!!!</h1>
<p>this is a html zyq-page</p>
<!-- [org.springframework.web.bind.MethodArgumentNotValidException: Validation failed for argument [0] in public
com.zyq.validation.pojo.entity.User com.zyq.validation.controller.TestController.test2(com.zyq.validation.pojo.entity.User):
[Field error in object 'user' on field 'userName': rejected value [zyq_34324];
codes [Size.user.userName,Size.userName,Size.java.lang.String,Size];
arguments [org.springframework.context.support.DefaultMessageSourceResolvable:
codes [user.userName,userName]; arguments []; default message [userName],5,2]; default message [名字字符过多(2到5个字符)]] ]
-->
<!--application/json不起作用-->
<!--<form action="/reg2"  id="myForm" method="post" enctype="application/json">-->
<form onsubmit="return false" method="post" id="myForm">
    <label for="un">用户名：</label> <input id="un" name="userName" type="text" value="zyq_34324"/><br/>
    <label for="age">年龄：</label> <input id="age" name="age" type="text" value="16"/><br/>
    <label for="pwd">密码：</label> <input id="pwd" name="pwd" type="password" value="123"/><br/>
    <label for="phone">电话：</label> <input id="phone" name="phone" type="text" value="13367904423"/><br/>
    <input type="submit" id="sub"  value="注册2">
</form>
</body>
<script>
    //定义serializeObject方法，序列化表单
    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    }

    //表单序列化：
    //第一种: 序列化提交 $(’#form’).serialize()  //这种方式是将表单数据 格式化为  k=v&k=v&k=v&k=v
    //第二种：引入  jquery.serializeExtend-1.0.1.js     $('#form').getJsonData()

    //JSON.stringify()的作用是将 JavaScript 对象(json对象)转换为 JSON 字符串，
    //而JSON.parse()可以将JSON字符串转为一个JavaScript 对象(json对象)。
    $('#myForm').submit(function(e) {   var temp = $("#myForm").serializeObject();

        e.preventDefault(); // 阻止表单默认提交行为
        $.ajax({
            url: 'http://localhost:8080/reg2', // 假设表单有action属性
            type: 'post',
            contentType: 'application/json',
            dataType: 'json',
            data: JSON.stringify(temp) ,
            //$(this).serialize()： 是一些k-v字符串(serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。)
            //JSON.stringify( $(this).serialize() )
            success: function(response) {
                // 成功回调函数
                console.log('Form submitted:', response);
                //alert("成功"+response.userName);
                alert("成功"+JSON.stringify(response));
            },
            error: function(xhr, status, error) {
                // 失败回调函数
                console.error('Submission failed:', status, error);
            }
        });
    });
</script>
</html>